<template>
    <div class="revenue_pay_detail_container">
        <el-dialog v-model="state.show" title="设置" width="600px" @closed="onClosed">
            <div class="content">
                <el-form :model="form" ref="formRef" label-width="auto" @submit.prevent>
                    <el-form-item label="企业名称:">{{ state.merchantName }}</el-form-item>
                    <el-form-item label="商城名称:">{{ state.tenantName }}</el-form-item>
                    <el-form-item label="支付手续费:" class="feeRatio" prop="feeRatio" :rules="rules.feeRatio">
                        <el-radio-group v-model="form.type" @change="onRadioChange">
                            <el-radio :label="2">统一设置</el-radio>
                            <el-radio :label="1">自定义</el-radio>
                        </el-radio-group>
                        <template v-if="form.type === 1">
                            <el-input-number
                                class="input_number"
                                v-model="form.feeRatio"
                                :min="0"
                                :max="50"
                                :precision="2"
                                :controls="false"
                                placeholder="请输入" />
                            <span class="margin_left_2px"> %</span>
                        </template>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="state.show = false">取消</el-button>
                    <el-button type="primary" @click="onCofirm(formRef)">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import request from '@/request';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

const emit = defineEmits(['sync']);
const formRef = ref(null);
const form = reactive({
    corpId: '',
    type: 1,
    feeRatio: null
});
const rules = reactive({
    feeRatio: [{ required: false, message: '该字段必填', trigger: 'blur' }]
});
const onRadioChange = v => {
    if (v === 1) {
        rules.feeRatio[0].required = true;
    } else {
        rules.feeRatio[0].required = false;
    }
};
const state = reactive({
    show: false,
    // 存一份原始数据，用于关闭弹框时还原
    row: {},
    tenantName: '',
    merchantName: ''
});

const onClosed = () => {
    formRef.value.resetFields();
    emit('sync', state.row);
};
const onCofirm = formEl => {
    formEl.validate(async (valid, fields) => {
        if (valid) {
            let p = {};
            Object.assign(p, form);
            if (p.type === 2) {
                delete p.feeRatio;
            }
            const res = await request('setQiyiPremiumServ', p);
            ElMessage.success('设置成功');
            state.row.type = form.type;
            state.row.feeRatio = form.feeRatio;
            state.show = false;
        }
    });
};

const onOpen = row => {
    form.corpId = row.id;
    form.type = row.type;
    if (row.type === 1) {
        rules.feeRatio[0].required = true;
        form.feeRatio = +row.feeRatio;
    } else {
        rules.feeRatio[0].required = false;
        form.feeRatio = null;
    }
    Object.assign(state.row, row);
    state.tenantName = row.tenantName;
    state.merchantName = row.merchantName;
    state.show = true;
};
defineExpose({
    onOpen
});
</script>

<style lang="scss" scoped>
.revenue_pay_detail_container {
    .feeRatio {
        :deep(.el-form-item__label-wrap) {
            .el-form-item__label::before {
                content: '';
                display: none;
            }
        }
        :deep(.el-form-item__content) {
            .el-form-item__error {
                margin-top: 4px;
                margin-left: 195px;
            }
        }
    }
    .input_number {
        width: 90px;
        margin-left: 8px;
        :deep(.el-input) {
            .el-input__inner {
                text-align: left;
            }
        }
    }
    .margin_left_2px {
        margin-left: 2px;
    }
}
</style>
